<template>
	<view>
		<view class="info-box">
			<view class="form-box">
				<u-form :model="info" ref="uForm" label-width="150">
					<u-form-item label="姓名:">
						<u-input v-model="info.name" disabled />
					</u-form-item>
					<u-form-item label="所属单位:">
						<u-input v-model="info.company.name" disabled  />
					</u-form-item>
					<u-form-item label="岗位:">
						<u-input v-model="info.profession.name" disabled />
					</u-form-item>
					<u-form-item label="员工编号:">
						<u-input v-model="info.employeeNumber" disabled />
					</u-form-item>
					<u-form-item label="手机号:">
						<u-input v-model="info.phone" />
					</u-form-item>
					<!-- <u-form-item label="身份证:">
						<u-input v-model="info.identityNumber" />
					</u-form-item>
					<u-form-item label="必学课程:">
						<u-input v-model="courseName" disabled />
					</u-form-item> -->
				</u-form>
			</view>
			<u-row gutter="30">
				<u-col span="4">
					<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="saveUsersMy">保存</u-button>
				</u-col>
				<u-col span="4">
					<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="updatePwd">修改密码</u-button>
				</u-col>
				<u-col span="4">
					<u-button type="primary" :custom-style="customStyleButton" hover-class="none" @click="loginOutBox = true">退出登录</u-button>
				</u-col>
			</u-row>
			<u-modal v-model="pwdShow" :show-cancel-button="true"  @confirm="pwdConfirm" confirm-color="#F18B3A" title="修改密码">
				<view class="slot-content" style="padding: 0 20rpx;">
					<u-form :model="form" ref="uForm" label-width="120" border-radius="14">
						<u-form-item label="旧密码"><u-input v-model="form.oldPwd" placeholder="旧密码" /></u-form-item>
						<u-form-item label="新密码"><u-input v-model="form.newPwd" placeholder="新密码" /></u-form-item>
					</u-form>
				</view>
			</u-modal>
			<u-modal v-model="loginOutBox" content="您确定要退出吗？" :show-cancel-button="true"  @confirm="confirm" confirm-color="#F18B3A"></u-modal>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {userInfo,usersMy,userInfoCourses,userPwd} from '../../api/api.js'
	export default {
		data() {
			return {
				info: {},
				customStyleButton:{
					marginTop:'50rpx',
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				courseName:'',
				loginOutBox:false,
				pwdShow:false,
				form:{
					oldPwd: '',
					newPwd: ''
				}
			}
		},
		onLoad(option) {
			this.getUserInfo(option.id)
		},
		methods: {
			// 退出登录
			confirm(){
				uni.clearStorage()
				uni.navigateTo({
					url: `../login/login`
				})
			},
			updatePwd(){
				if(this.info.profession.name == '游客模式'){
					this.$refs.uToast.show({
						title: '游客模式不能修改密码',
					})
				}else{
					this.form.oldPwd = ''
					this.form.newPwd = ''
					this.pwdShow = true
				}
			},
			pwdConfirm(){
				userPwd(this.form).then(resp=>{
					uni.clearStorage()
					uni.navigateTo({
						url: `../login/login`
					})
				})
			},
			// 获取用户信息
			getUserInfo(id){
				userInfo({id:id}).then(resp=>{
					this.info = resp
					this.getUserInfoCourses()
				})
			},
			// 查询用户必学课程
			getUserInfoCourses(){
				let id = uni.getStorageSync('userObj').id
				userInfoCourses({id:id}).then(resp=>{
					let arr = []
					resp.forEach(e=>{
						arr.push(e.name)
					})
					this.courseName = arr.join(',')
				})
			},
			// 更改用户信息
			saveUsersMy(){
				let parmes = {identityNumber: this.info.identityNumber,phone: this.info.phone}
				usersMy(parmes).then(resp=>{
					uni.switchTab({
						url:'/pages/me/me'
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.info-box{
	padding: 20rpx;
	.form-box{
		background: #FAFBFF;
		border-radius: 10px;
		padding: 0 20rpx;
	}
}
</style>
